<template>
  <div class="matches-page">
    <el-card class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>赛事管理</h2>
          <p>管理和查看所有赛事信息</p>
        </div>
        <div class="search-section">
        <el-form :model="searchForm" inline>
          <el-form-item label="赛事名称">
            <el-input 
              v-model="searchForm.tournament_name" 
              placeholder="请输入赛事名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="赛事简介">
            <el-input 
              v-model="searchForm.tournament_intro" 
              placeholder="请输入赛事简介"
              clearable
            />
          </el-form-item>
          <el-form-item label="赛事积分">
            <el-input-number 
              v-model="searchForm.tournament_score" 
              placeholder="请输入赛事积分"
              :min="0"
              clearable
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input 
              v-model="searchForm.remarks" 
              placeholder="请输入备注"
              clearable
            />
          </el-form-item>
          <el-form-item label="赛事类型">
            <el-select 
              v-model="searchForm.tournament_type" 
              placeholder="请选择赛事类型"
              clearable
            >
              <el-option label="WTT常规赛" value="WTT常规赛" />
              <el-option label="WTT大满贯" value="WTT大满贯" />
              <el-option label="世界杯" value="世界杯" />
              <el-option label="亚运会" value="亚运会" />
              <el-option label="奥运会" value="奥运会" />
              <el-option label="世锦赛" value="世锦赛" />
              <el-option label="乒超联赛" value="乒超联赛" />
              <el-option label="德甲联赛" value="德甲联赛" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select 
              v-model="searchForm.status" 
              placeholder="请选择状态"
              clearable
            >
              <el-option label="待开始" value="pending" />
              <el-option label="进行中" value="ongoing" />
              <el-option label="已结束" value="completed" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
        <div class="action-section">
          <el-button type="primary" @click="goToAddWrapper">
            <el-icon><Plus/></el-icon>
            新增赛事
          </el-button>
          <el-button type="danger" @click="handleBatchDelete">
            <el-icon><Delete /></el-icon>
            批量删除
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card class="content-card">
      <!-- 搜索筛选区域 -->


      <!-- 数据表格 -->
      <div class="table-container"> 
        <vxe-grid
          v-bind="gridOptions"
          ref="tableRef"
        >
          <template #action="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              @click="goToDetailsWrapper(row)"
            >
              <el-icon><View /></el-icon>
              详情
            </el-button>
            <el-button 
              type="warning" 
              size="small" 
              @click="handleEditWrapper(row)"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              @click="handleDelete(row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </vxe-grid>
      </div>
    </el-card>
  </div>

</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { onMounted, watch } from 'vue'
import { 
    goToAdd, 
    goToDetails,
    handleEdit,
    handleDelete,
    handleSearch, 
    handleReset, 
    tableRef, 
    searchForm, 
    gridOptions,
    handleBatchDelete,
    refreshTable
} from './index.ts'

const router = useRouter()
const route = useRoute()

// 创建包装函数
const goToAddWrapper = () => goToAdd(router)
const goToDetailsWrapper = (row: any) => goToDetails(row, router)
const handleEditWrapper = (row: any) => handleEdit(row, router)

// 监听路由变化，如果有refresh参数则刷新表格
watch(() => route.query.refresh, (newVal: any) => {
  if (newVal === 'true') {
    // 刷新表格
    refreshTable()
    // 清除URL中的refresh参数
    router.replace({ path: route.path, query: { ...route.query, refresh: undefined } })
  }
})

// 页面挂载时检查是否需要刷新
onMounted(() => {
  if (route.query.refresh === 'true') {
    refreshTable()
    // 清除URL中的refresh参数
    router.replace({ path: route.path, query: { ...route.query, refresh: undefined } })
  }
})
</script>

<style scoped>
.matches-page {

  padding: 20px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.title-section p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.content-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;

  border-radius: 4px;
}

.search-section .el-form {
  margin: 0;
}

.search-section .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

.table-container {
  flex: 1;
  min-height: 0;
}
</style>